<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
    // ES5中的var是没有块级作用域的（if/for）
    // ES6中的let是有块级作用域的（if/for）

    // ES5及之前因为if和for都没有块级作用域的概念，大多数情况下，必须借助于funaction的作用域来解决应用外面变量的问题。
    // ES6中加入了let，它是有块级作用域
    // var的作用域太大，全局
    // 1.变量作用域：变量在什么范围内可用。
    // {
    //     var name = 'simple'
    //     console.log(name)
    // }
    // console.log(name)

    //2.没有块级作用域引起的问题：if的块级
    // var func;
    // if (true) {
    //     var name = 'simple'
    //     func = function () {
    //         console.log(name)
    //     }
    //     func() // simple
    // }
    // name = 'ku'
    // func() //ku

    //3.没有块级作用域引起的问题：for的块级
    // 闭包可解决此问题，函数是一个作用域
    // var btns = document.getElementsByTagName('button');
    // for (var i = 0; i < btns.length; i++) {
    //     // btns[i].addEventListener('click', function () {
    //     //     console.log('第' + i + '个按钮被点击') // 最后i等于5，所有按钮点击事件中console.log中的i（0、1、2、3、4）变量都修改为5
    //     // })
    //     (function (i) {
    //         btns[i].addEventListener('click', function () {
    //             console.log('第' + i + '个按钮被点击')
    //         })
    //     })(i)
    // }

    // ES6
    // let作用域小，局部
    const btns = document.getElementsByTagName('button');
    for (let i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', function () {
            console.log('第' + i + '个按钮被点击')
        })
    }

</script>
</body>
</html>